main
{
  padding-top: 135px;  /* Same height as the navbar */
  min-height: 100dvh;
}

html {
  scroll-behavior: smooth;
}

.navigationBar
{
	display: flex;
	background-color: var(--divBackgroundColorScheme);
	align-items: center;
	justify-content: center;
	gap: 20px;
	position: fixed;       /* Makes it stick to the screen */
	top: 0;                /* Aligns it to the top */
	left: 0;
	width: 100vw;          /* Full width */
	z-index: 999;
	height: var(--navigationBarHeight);
	box-shadow: 1px 1px 0.5em #0A0A0A;
}

.dropdownDiv
{
	position: relative;
	display: inline-block;
	align-items: center;
	background-color: transparent;
	padding: 15px;
    margin: -15px;
}

.dropdownButton
{
  --currentColor: var(--buttonColorScheme);
  text-align: center;
  background-color: transparent;
  border: 0;

  font-family: Montserrat, sans-serif;
  font-size: var(--navigationBarFont);
  color: var(--currentColor);
  transition: color 0.3s ease; /* Controls the smoothness */
  /*padding-bottom:12px;*/
}


.dropdownButton:hover
{
	background-color: transparent;
	color: var(--buttonHighlightColorScheme);
}

.dropdownButtonHoverable
{
  --currentColor: var(--buttonColorScheme);
  text-align: center;
  background-color: transparent;
  border: 0;

  font-family: Montserrat, sans-serif;
  font-size: var(--navigationBarFont);
  color: var(--currentColor);
  transition: color 0.3s ease; /* Controls the smoothness */
  /*padding-bottom:12px;*/
}


.dropdownButtonHoverable:hover
{
	background-color: transparent;
	color: var(--buttonHighlightColorScheme);
	cursor:pointer;
}


.dropdownButtonHoverable:active
{
	background-color: transparent;
	color: var(--buttonHighlightColorClickScheme);
}


.dropdownButtonRainbow
{
  --currentColor: var(--rainbowColorStill);
  text-align: center;
  background-color: transparent;
  border: 0;

  font-family: Montserrat, sans-serif;
  font-size: var(--navigationBarFont);
  color: var(--currentColor);
  transition: color 0.3s ease; /* Controls the smoothness */
}


.dropdownButtonRainbow:hover
{
	background-color: transparent;
	color: var(--rainbowColor);
	cursor: pointer;
}


/* Hidden dropdown content */
.dropdownDiv-content {
  display: none;
  position: absolute;
  background-color: var(--navBarContentBackgroundColorScheme);
  /*min-width: 0px;
  max-width: 1000px;*/
  width: max-content;
  z-index: 4;
  flex-direction: column;
  /*transform:translate(0,clamp(5px, 0.7vw, 10px));*/
  transform:translate(0,15px);
}


/* Hover effects */
.dropdownDiv:hover .dropdownDiv-content {
  display: block;
}


/* Dropdown links */
.dropdownDiv a {
  --currentColor: var(--buttonColorScheme);
  color: var(--currentColor);
  margin: 0;
  
  font-size: var(--navigationBarFont);
  text-decoration: none;
  display: block;
  background-color: transparent;
  transition: color 0.3s ease; /* Controls the smoothness */
}

.dropdownDiv a:hover {
  color: var(--buttonHighlightColorScheme);
}



/* Dropdown links */
.dropdownDiv-content a {
  --currentColor: var(--buttonColorScheme);
  color: var(--currentColor);
  padding: 10px 16px;
  margin: 0;
  text-decoration: none;
  display: block;
  background-color: transparent;
  transition: color 0.3s ease; /* Controls the smoothness */
  
  font-family: Montserrat, sans-serif;
  font-size: var(--navigationBarFont);
  text-align: center;
}

.dropdownDiv-content a:hover {
  color: var(--buttonHighlightColorScheme);
}

.dropdownDiv-content a:active
{
	background-color: transparent;
	color: var(--buttonHighlightColorClickScheme);
}